<template>
    <div class="page-community-index">
        <CustomNav title="精彩视频" type="white" :fixed="true"></CustomNav>
        <CustomNav title="精彩视频" :opacity="0"></CustomNav>
        <PostCard v-for="(post, index) in videoList.list"
            :key="index"
            :index="index"
            :post="videoDetailMap[post]"
            :has-right-icon="true"
            @click="onClickPost"
            @publish-comment="onClickPost">
        </PostCard>
    </div>
</template>

<script>
import CustomNav from '@/components/nav/customNav.vue';
import store from '@/store';
import {
    mapState,
} from 'vuex';
import PostCard from '@/features/community/postCard.vue';
import {
    api,
} from '@/lib/api';
import mixin from '@/lib/mixin';

export default {
    name: 'CommunityIndex',
    components: {
        CustomNav,
        PostCard,
    },
    mixins: [
        mixin,
    ],
    data() {
        return {
        };
    },
    computed: {
        ...mapState({
            /** 用户基础信息 */
            userBasicInfo: state => state.user.basicInfo,
        }),
        ...mapState('community', {
            /** 用户基础信息 */
            videoList: state => state.videoList,
            videoDetailMap: state => state.videoDetailMap,
        }),
    },
    watch: {
    },
    methods: {
        async getData(forceUpdate = false) {
            // console.log('get data', store);
            store.dispatch('community/getVideoList', {
                offset: forceUpdate ? 0 : this.videoList.list.length,
                count: 10,
                forceUpdate,
            });
        },
        onClickPost(id) {
            api.navigateTo({
                url: '/pages/post_detail/main',
                query: {
                    post_id: id,
                },
            });
        },
    },
    async created(query) {
        store.commit('utils/startRequest');
        await this.getData(true);
        store.commit('utils/endRequest');
        // console.log('videoList', this.videoList);
    },
    onReachBottom() {
        this.getData();
    },
    onShareAppMessage(res) {
        // console.log(res);
        if (res.from === 'button' && res.target.id) {
            const value = this.videoDetailMap[res.target.id];
            // console.log(value);
            return {
                title: `${value.title}`,
                imageUrl: value.image,
                path: `/pages/post_detail/main?post_id=${value.id}&referrer_id=${this.userBasicInfo.id}`,
            };
        }
        return {
            title: `精彩视频`,
            imageUrl: '',
            path: `pages/community_index/main?referrer_id=${this.userBasicInfo.id}`,
        };
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-community-index {
    min-height: 100%;
    background-color: #F3F3F3;
    box-sizing: border-box;
}
</style>
